<style>
    .transfer-list {
        position: relative;
        line-height: 1.5;
        display: inline-block;
        width: 250px;
        height: 400px;
        font-size: 14px;
        vertical-align: middle;
        position: relative;
        padding-top: 35px;
    }
    .transfer-list-header{
        padding: 8px 16px;
        background: #f9fafc;
        color: #515a6e;
        border: 1px solid #dcdee2;
        border-bottom: 1px solid #e8eaec;
        border-radius: 6px 6px 0 0;
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
    .transfer-list-body{
        height: 100%;
        border: 1px solid #dcdee2;
        border-top: none;
        border-radius: 0 0 6px 6px;
        position: relative;
        overflow: hidden;
    }
    .transfer-operation {
        display: inline-block;
        margin: 0 16px;
        vertical-align: middle;
    }
    .transfer-list-body-with-search{
        padding-top: 34px;
    }
    .transfer-list-body-content{
        padding: 6px 0 0;
        height: 100%;
        padding: 4px 0;
        overflow: auto;
    }
    .transfer-list-content-item:hover {
        background: #f3f3f3;
    }
    .transfer-list-content-not-found{
        display: block;
        text-align: center;
        color: #c5c8ce;
    }
    .transfer-list-content-item {
        margin: 0;
        line-height: normal;
        padding: 7px 16px;
        clear: both;
        color: #515a6e;
        font-size: 14px !important;
        white-space: nowrap;
        list-style: none;
        cursor: pointer;
        transition: background 0.2s ease-in-out;
    }
    .transfer-list-body-search-wrapper {
        padding: 8px 8px 0;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;

    }
</style>
<template>
    <div>
        <div class="transfer-list">
            <div class="transfer-list-header">
                <Checkbox  v-model="leftCheckAll" @on-change="leftAllCheck" :disabled="leftInfoList.length < 1"></Checkbox>
                <span class="ivu-transfer-list-header-title">{{title[0]}}</span>
                <span class="ivu-transfer-list-header-count">{{leftInfoList.length}}</span>
            </div>
            <div class="transfer-list-body transfer-list-body-with-search">
                <div class="transfer-list-body-search-wrapper">
                    <Input  search v-model="leftInput" size="small" @on-search="addSearchUser" placeholder="搜索租户名称">
                        <!-- <Icon type="ios-contact" slot="prefix" /> -->
                    </Input>
                </div>
                <ul class="transfer-list-body-content">
                    <template v-if="leftInfoList.length > 0">
                        <CheckboxGroup v-model="leftCheckList" @on-change="leftCheck">
                            <template v-for="item in leftInfoList">
                                <li class="transfer-list-content-item">
                                    <Checkbox :label="item.id">
                                      <span style="margin-left: 8px">{{item.tenant_name }}</span>
                                    </Checkbox>
                                </li>
                            </template>
                        </CheckboxGroup>
                    </template>
                    <li v-else class="transfer-list-content-not-found">{{leftNotFindMsg}}</li>
                </ul>
            </div>
        </div>
        <div class="transfer-operation ">
            <Button :disabled="rightCheckList.length == 0" type="primary" size="small"  @click="dleRight()"><Icon type="ios-arrow-back" style="padding-right:4px" /><span>移除</span></Button>
            <Button :disabled="leftCheckList.length == 0" type="primary" style="display: block;margin-top:8px" size="small" @click="addRight()">新增<Icon type="ios-arrow-forward" style="padding-left:4px" /></Button>
        </div>
        <div class="transfer-list">
            <div class="transfer-list-header">
                <Checkbox v-model="rightCheckAll" @on-change="rightAllCheck" :disabled="rightInfoList.length < 1"></Checkbox>
                <span class="ivu-transfer-list-header-title">{{title[1]}}</span>
                <span class="ivu-transfer-list-header-count">{{rightInfoListTemp.length}}</span>
            </div>
            <div class="transfer-list-body transfer-list-body-with-search">
                <div class="transfer-list-body-search-wrapper">
                    <Input @on-clear="backList" clearable search v-model="rightInput" size="small" @on-search="searchTenant" placeholder="搜索租户名称"/>
                </div>
                <ul class="transfer-list-body-content">
                    <template v-if="rightInfoList.length > 0">
                        <CheckboxGroup v-model="rightCheckList" @on-change="rightCheck">
                            <template v-for="item in rightInfoList">
                                <li class="transfer-list-content-item">
                                    <Checkbox :label="item.id">
                                      <span style="margin-left: 8px">{{item.tenant_name }}</span>
                                    </Checkbox>
                                </li>
                            </template>
                        </CheckboxGroup>
                    </template>
                    <li v-else class="transfer-list-content-not-found">列表为空</li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
    import ajax from "../ajax_util.js"
    export default {
        name: "transferTenant",
        data () {
            return {
                edit: false,
                leftNotFindMsg: "列表为空",
                leftCheckAll: false,    //左边全选按钮
                leftCheckList: [],       //左边选择集合
                leftInfoList: [],        //左边数据集合
                leftInput: "",          //左边搜索值

                rightCheckAll: false,   //右边全选按钮
                rightCheckList: [],     //右边选择集合
                // rightInfoList: [],      //右边数据集合
                rightInput: "",         //右边搜索值
                rightInfoListTemp: [],   //右边选择框原始数据
            }
        },
        mounted:function(){
          var temp = JSON.stringify(this.rightInfoList)
          this.rightInfoListTemp = JSON.parse(temp)
        },

        methods:{
             // 新增
            addRight(){
                this.leftCheckList.forEach(item =>{
                    this.leftInfoList.forEach((i,index) =>{
                        if(i.id == item){
                            this.rightInfoList.push(i)
                            this.leftInfoList.splice(index,1)
                        }
                    })
                })
                this.leftCheckList = []
                if(this.leftCheckAll){
                    this.leftCheckAll = false
                }
            },
            // 移除
            dleRight(){
                var t = JSON.stringify(this.rightInfoList)
                var temp = JSON.parse(t)
                this.rightCheckList.forEach(item =>{
                    this.rightInfoList.forEach((i,index) =>{
                        if(i.id == item){
                            this.leftInfoList.push(i)
                            temp.splice(index,1)
                        }
                    })
                    this.rightInfoListTemp.forEach((i,index) =>{
                        if(i.id == item){
                            this.rightInfoListTemp.splice(index, 1)
                        }
                    })
                })
                this.rightCheckList = []

                this.rightInfoList = this.rightInfoListTemp
                this.rightInput = ""
                if(this.rightCheckAll){
                    this.rightCheckAll = false
                }
            },
            // 清楚输入框时回复右边是数据
            backList(){
                this.rightInfoList = this.rightInfoListTemp
            },
            // 右边多选按钮控制
            rightCheck(value){
                if(value.length == this.rightInfoList.length && !this.rightCheckAll){
                    this.rightCheckAll = true
                }else if(value.length != this.rightInfoList.length && this.rightCheckAll){
                    this.rightCheckAll = false
                }
            },
            // 右边全选按钮控制
            rightAllCheck(value){
                if(value){
                    var temp = []
                    this.rightInfoList.forEach(item =>{
                        temp.push(item.id)
                    })
                    this.rightCheckList = temp
                }else{
                    this.rightCheckList = []
                }
            },
            //右边搜索人员
            searchTenant(value){
                console.log(value)
                var tempList = []
                this.rightInfoList.forEach((item,index) =>{
                    if(item.user_name.indexOf(value) != -1){
                        tempList.push(item)
                    }
                })
                this.rightInfoList = tempList
            },

            // 左边多选按钮控制
            leftCheck(value){
                if(value.length == this.leftInfoList.length && !this.leftCheckAll){
                    this.leftCheckAll = true
                }else if(value.length != this.leftInfoList.length && this.leftCheckAll){
                    this.leftCheckAll = false
                }
            },
            // 左边全选按钮控制
            leftAllCheck(value){
                if(value){
                    var temp = []
                    this.leftInfoList.forEach(item =>{
                        temp.push(item.id)
                    })
                    this.leftCheckList = temp
                }else{
                    this.leftCheckList = []
                }
            },
            //左边搜索人员
            addSearchUser(value){
                if(value != null && value != ""){
                  var that=this;
                  var url= this.CONFIG.url_know + "/searchTenant/" + value;
                  this.utils.delay(() => {
                    ajax.get({
                        url:url,
                        that:that,
                        params:null,
                        success:function(data){
                            that.leftInfoList = []
                            data.forEach(item =>{
                                var t = that.rightInfoList.find(e => e.id == item.id)
                                if(t === undefined){
                                    that.leftInfoList.push(item)
                                }else{
                                    that.leftNotFindMsg = "已选择该租户"
                                }
                            })
                        }
                    })
                  }, 500)
                }
            },
        },
        props:{
            value:{},
            title:{
                default: ["未选择","已选择"]
            },
            listName:{
                type: String,
                default: ""
            }
        },
        computed: {
          rightInfoList: {
            get: function() {
              return this.value;
            },
            set: function(value) {
              this.$emit('input', value);
            }
          },
        },
    }
</script>
